<%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>Project Demo</title>
	<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">
	<script type="text/javascript" src="easyui/jquery.min.js"></script>
	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<title>Project Management</title>
	
	<style type="text/css">
		#fm{
			margin:0;
			padding:10px 30px;
		}
		.ftitle{
			font-size:14px;
			font-weight:bold;
			padding:5px 0;
			margin-bottom:10px;
			border-bottom:1px solid #ccc;
		}

		.fitem{
			margin-bottom:5px;
			
		}

		.fitem label{
			display:inline-block;
			width:80px;
			vertical-align:text-top;
		}
	</style>
	
	<script type="text/javascript">
	
	    function test() {
	    	
	    	$("#slectFlowId").combobox({  
	    		url:'getAllFlow', valueField:'id', textField:'name', panelHeight:'auto',
	    	    onSelect: function selectTrigger(record) {
	    	    	var projectName = $("input[name='name']").val();
	    			var projectId = $("input[name='projectId']").val();
	    			var version = $("input[name='version']").val();
	    			var startTime = $("input[name='startTime']").val();
	    			var endTime = $("input[name='endTime']").val();
	    	    	var form = {
	    				flowId : record.id,
	    				name : projectName,
	    				projectId : projectId,
	    				version : version,
	    				endTime : new Date(endTime),
						startTime : new Date(startTime)
						
	    			};
	    			$.ajax({
	    			     url: 'loadTemplateFlow',
	    			     data: JSON.stringify(form) ,
	    			     dataType : "json",
	    			     contentType: "application/json;charset=UTF-8",
	    			     type: "POST",
	    			     success: function(data) {
	    		    	 	var userId = $("input[name='userId']").val();

	    		    	 	var tmpStart = new Date(data.startTime);
	    		    	 	var tmpEnd = new Date(data.endTime);
	    		    	 	delete data.startTime;
	    		    	 	delete data.endTime;
	    		    	 	$("#fm").form('load', data);
	    		    	 	$("input[name='startTime']").val(tmpStart);
	    		    	 	$("input[name='endTime']").val(tmpEnd);

	    		    	 	$("input[name='userId']").val(userId);
	    					$("#fm .dynamic").remove();
	    					$.each(data.nodeList, function(index, entry) {
	    						$("#fm").append("<fieldset class='dynamic'> <input name='nodeList[" + index + "].id' type='hidden' value='" + entry.id + "'/> <legend>" + entry.nodeName + "</legend>" + 
	    								"<input name='nodeList[" + index + "].nodeName' type='hidden' value='" + entry.nodeName + "'/>"
	    								+ "<div class='fitem'> <label>Project Node WorkLoad:</label> <input name='nodeList[" + index + "].planWorkLoad' class='easyui-validatebox' required='true' value='"+ entry.planWorkLoad  + "'></div>"
	    								+ "<div class='fitem'> <label>Designer User Id:</label> <input id='selectUserId_" + index + "' name='nodeList[" + index + "].userId' class='easyui-combobox'/> </div>"  
	    								+ "</fieldset>");
	    						$("#selectUserId_" + index).combobox({
	    							url: 'getAllUser',
	    							valueField:'userID',  
	    						    textField:'userName',
	    						    method: 'GET'
	    						});
	    					});
	    			     }
	    			});
	    		}
	    	}); 
	    }
	    
	    function selectProject() {
	    	$("#dlgSelectProject").dialog('open').dialog('setTitle','Select Project'); 
	    }
		
	    function confirmSelectProject() {
	    	var selected = $('#projectList').datagrid('getSelected');
	    	if (selected) {
	    		$("input[name='projectId']").val(selected.projectID);
	    		$("input[name='name']").val(selected.projectName);
	    	}
	    	$('#dlgSelectProject').dialog('close'); 
	    }

        function editProject() {
        	var row = $('#dg').datagrid('getSelected');  
        	if (row){  
        		$('#main').panel({   
        			   href:'editProject?id=' + row.id,   
        			    onLoad:function(){   
        			    	$("#slectFlowId").combobox('disable');
        			    }   
        			}); 
        	}
        }
		
		function saveProject(){  
		    $('#fm').form('submit',{  
		        url: 'createProject',  
		        onSubmit: function(param){ 
		            return $(this).form('validate');  
		        },  
		        success: function(result){  
		        	var rs = eval('('+result+')');
		        	if (rs.failure){   
		        		alert(rs);
		        	} else {
		        		//$('#dlg').dialog('close');      // close the dialog  
			            $('#dg').datagrid('reload');    // reload the user data 
			            alert('ok.请刷新，暂时的。');
		        	}

		        }  
		    });  
		} 
		
		function editProjectNode() {
			var row = $('#project_nodes').datagrid('getSelected');  
        	if (row){  
        		$('#main').panel({   
        			   href:'editProjectNode?id=' + row.id,   
        			    onLoad:function(){   
        			    	
        			    }   
        			}); 
        	}
		}
		
		</script>
</head>
<body>
    <div id="header"> <h2>Project Management ${sessionScope.currentUser.userName}</h2> </div>
	
	<div id="mainwrap" class="easyui-layout" style="width:2000px;height:800px;">
		
		<div id="side" data-options="region:'west',split:true" title="management" style="width:550px;height:300px" >
		
			<table id="dg" title="All Projects User: ${user.userName}" class="easyui-datagrid"
				style="width: 550px; height: 250px" url="getAllProjects"
				toolbar="#toolbar" rownumbers="true" fitColumns="true"
				singleSelect="true">
				<thead>
					<tr>
						<th field="flowId" width="50">Flow Id</th>
						<th field="currentNodeId" width="50">Node Id</th>
						<th field="originatorId" width="50">Originator Id</th>
						<th field="name" width="50">Project Name</th>
					</tr>
				</thead>
			</table>
			<div id="toolbar">
				<!-- <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newProject()">New Project</a> --> 
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editProject()">Edit Project</a> 
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyProject()">Remove Project</a>
			</div>
			
			<table id="project_nodes" title="All Project Nodes User: ${user.userName}" class="easyui-datagrid"
				style="width: 550px; height: 250px" url="getAllProjectNodes?userId=${user.userID}"
				toolbar="#nodes_toolbar" rownumbers="true" fitColumns="true" method="get"
				singleSelect="true">
				<thead>
					<tr>
						<th field="id" width="50">Node Id</th>
						<th field="projectId" width="50">Project Id</th>
						<th field="nodeId" width="50">Node Id</th>
						<th field="planWorkLoad" width="50">Plan WorkLoad</th>
					</tr>
				</thead>
			</table>
			<div id="nodes_toolbar">
				<!-- <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newProject()">New Project</a> --> 
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editProjectNode()">Edit Project Node</a> 
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyProjectNode()">Remove Project Node</a>
			</div>
		
		</div>
		
		<div id="main" data-options="region:'center',title:'Data Show', href:'newProject', onLoad: function(){test()}">
				
		
		</div>
	</div>
	

	
	<div id="footer">
		
	</div>
</body>
</html>

